<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-select v-model="option1" style="width:120px;" @change="handleFilter">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="option2" style="width:120px;" @change="handleFilter">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-model="username" placeholder="退款人" style="width:200px;" @keyup.enter.native="handleFilter"/>
          <el-input v-model="targetName" placeholder="商品名称或单号" style="width:200px;" @keyup.enter.native="handleFilter"/>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <subtable
      :table-label="editLabel"
      :table-data="editData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="first" label="退款订单" align="center" min-width="30">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickRefund(scope)">{{ scope.row.orderName }}</el-button>
          <br>
          <span style="font-size:12px;color:#8a8a8a">订单号: {{ scope.row.orderId }}</span>
          <br>
          <span style="font-size:12px;color:#8a8a8a">退款单号: {{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column slot="isPro" label="退款人" align="center" min-width="10">
        <template slot-scope="scope">
          <el-button type="text" @click="handleConductor(scope, 'user')">{{ scope.row.userName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="isEnd" label="操作人" align="center" min-width="10">
        <template slot-scope="scope">
          <el-button type="text" @click="handleConductor(scope, 'operator')">{{ scope.row.operatorName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="button" label="操作" align="center" min-width="20">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleRefundDetail(scope)">退款详情</el-button>
        </template>
      </el-table-column>
    </subtable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <refund-dialog
      :visiabledialog="refundDialog"
      :dialog-data="refundData"
      @changeVisiable="changeVisiable1"
    />
    <detail-dialog
      :dialog="detailDialog"
      :dialog-data="detailData"
      @Visiable="changeVisiable2"
    />
    <conductor-dialog
      :visiabledialog="conductorDialog"
      :dialog-data="conductorData"
      @changeVisiable="conductorDialog = false"
    />
  </div>
</template>

<script>
  import detailDialog from './detailDialog'
  import refundDialog from './refundDialog'
  import conductorDialog from '@/components/Dialog'
  import Subtable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import {getOrderById, getOrderRefundList} from '@/api/deal/orderRefund' // 数据接口
  import {getUserDetail} from '@/api/deal/userDetail'
  import {getOrderLogList} from '@/api/deal/order' // 数据接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      Pagination,
      refundDialog,
      detailDialog,
      conductorDialog
    },
    data() {
      return {
        conductorDialog: false,
        conductorData: {},
        refundDialog: false,
        refundData: {},
        detailData: {},
        detailDialog: false,
        editLabel: [
          {
            label: '退款金额', width: '10', prop: 'actualAmount'
          },
          {
            label: '申请时间', width: '15', prop: 'createTimeTimeStr'
          },
          {
            label: '退款状态', width: '10', prop: 'status'
          }
        ],
        editData: [],
        listFilter: [],
        total: 0,
        currentpage: 1,
        pagesize: 10,
        username: '',
        targetName: '',
        radio: '1',
        option1: '',
        option2: '',
        options1: [
          {
            label: '商品类型',
            value: ''
          },
          {
            label: '教学计划',
            value: '教学计划'
          },
          {
            label: '班级',
            value: '班级'
          }
        ],
        options2: [
          {
            label: '退款状态',
            value: ''
          },
          {
            label: '退款待处理',
            value: '退款待处理'
          },
          {
            label: '退款成功',
            value: '退款成功'
          },
          {
            label: '退款关闭',
            value: '退款关闭'
          },
          {
            label: '退款撤销',
            value: '退款撤销'
          }
        ]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleConductor(scope, val) {
        this.conductorDialog = true
        let id = ''
        if (val === 'user') {
          id = scope.row.userId
        } else if (val === 'operator') {
          id = scope.row.operator
        }
        getUserDetail(id).then(response => {
          this.conductorData = response.data.item
        })
      },
      handleRefundDetail(scope) {
        this.detailDialog = true
        this.detailData = scope.row
      },
      handleClickRefund(scope) {
        this.refundDialog = true
        let data = ''
        getOrderById(scope.row.orderId).then(response => {
          data = response.data.item
          if (data.status === 'created') data.status = '未付款'
          if (data.status === 'paid') data.status = '已付款'
          if (data.status === 'refunding') data.status = '申请退款'
          if (data.status === 'refunded') data.status = '已退款'
          if (data.status === 'cancelled') data.status = '已取消'
          getOrderLogList(scope.row.orderId).then(orderLogList => {
            data.tableData = orderLogList.data.items
            this.refundData = data
          })
        })
      },
      changeVisiable2(val) {
        this.detailDialog = val
      },
      changeVisiable1(val) {
        this.refundDialog = val
      },
      handleSizeChange(val) {
        console.log(val)
        this.currentpage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        console.log(val)
        this.currentpage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.editData = this.listFilter.filter(item => {
          if (this.option1 && item.targetType !== this.option1) return false
          if (this.option2 && item.status !== this.option2) return false
          if (this.username && item.userName.toLocaleLowerCase().indexOf(this.username.toLocaleLowerCase()) === -1) return false
          if (this.targetName) {
            if (item.targetName.toLocaleLowerCase().indexOf(this.targetName.toLocaleLowerCase()) === -1) return false
            if (item.orderId.toLocaleLowerCase().indexOf(this.targetName.toLocaleLowerCase()) === -1) return false
          }
          return true
        })
        this.total = this.editData.length
      },
      clearParams() {
        this.option1 = ''
        this.option2 = ''
        this.username = ''
        this.targetName = ''
        this.getData()
      },
      getData() {
        this.listLoading = true
        getOrderRefundList().then(response => {
          this.editData = response.data.items.filter(item => {
            if (item.tenantId !== getTenantId()) return false
            return true
          })
          this.editData.map(item => {
            if (item.status === 'created') item.status = '退款待处理'
            if (item.status === 'success') item.status = '退款成功'
            if (item.status === 'failed') item.status = '退款关闭'
            if (item.status === 'cancelled') item.status = '退款撤销'
          })
          this.listFilter = this.editData
          this.total = this.editData.length
          this.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .allsearch {
    margin-top: 0px;
    padding: 0;

    .search-content {
      width: 100%;
    }
  }
</style>
